<template>
  <view class="bd">
    <view class="inp-group">
      <view class="inp-item uni-item-line flex flex-al-c">
        <view
          class="inp-title texts"
          style="width: 200upx; padding-bottom: 42upx"
          >所属区域</view
        >
        <simpleAddress @done="getAddress1"></simpleAddress>
      </view>
      <!-- <view class="inp-item uni-item-line flex flex-al-c">
				<view class="inp-title" style="width: 200upx;">社区名称</view>
				<input class="inp" type="text" placeholder="社区名称" v-model="uniName"/>
			</view> -->
      <view>
        <view
          class="uni-item-line texts"
          style="
            font-size: 30upx;
            margin: 30upx 0 0;
            padding: 20upx 0;
            font-weight: 900;
          "
          >选择社区</view
        >
        <view
          class="uniList flex uni-item-line flex-j-b t1"
          v-for="(v, index) in communityList"
          :key="v.id"
          @tap="checkUni(index)"
        >
          <view :class="currentIndex === index ? 'a1' : 'a2'">{{
            v.deptName
          }}</view>
          <u-icon
            name="checkmark-circle"
            color="#2979ff"
            size="36"
            v-if="currentIndex === index"
          ></u-icon>
        </view>
      </view>
    </view>

    <view style="width: 90%; margin: 100upx auto 0">
      <button
        type="default"
        style="background: #18c7e1; color: #fff"
        @tap="sure"
      >
        完成
      </button>
      <button type="default" style="margin-top: 30upx" @tap="back">取消</button>
    </view>
  </view>
</template>

<script>
import simpleAddress from "../../components/my-simple-adress/simple-address.vue";
export default {
  components: {
    simpleAddress,
  },
  data() {
    return {
      user: {},
      backUrl: "",

      area: "",
      uniName: "",
      communityList: [],

      currentIndex: {},
      ptdq: true,
    };
  },
  onLoad(options) {
    this.user = JSON.parse(options.user || "{}");
    this.backUrl = options.url; // 返回url
    this.getAreaList();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getAddress1(res) {
      this.area = res;
      this.getCommunityList();
    },
    getAreaList() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.post("/communityInfo/getAreaList", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // 获取区域内社区列表
    getCommunityList() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/communityInfo/getCommunityList", {
          areaCode: this.area.areaCode,
          pageNum: "1",
          pageSize: "100",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.communityList = res.data.data.list || [];
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    checkUni(index) {
      this.ptdq = false;
      this.currentIndex = index;
    },
    sure() {
      if (this.ptdq) {
        uni.showToast({
          title: "请选择您的所属社区",
          icon: "none",
        });
      } else {
        if (!this.communityList.length) return;
        this.user.areaName =
          this.area.label +
          "-" +
          this.communityList[this.currentIndex].deptName;
        this.user.areaCode = this.area.areaCode;
        this.user.deptId = this.communityList[this.currentIndex].deptId;
        this.back();
      }
    },
    back() {
      let backUrl = this.backUrl;
      //if(backUrl=='/pages/health/health'){
      uni.setStorageSync(
        "community",
        JSON.stringify(this.communityList[this.currentIndex])
      );
      uni.switchTab({
        url: backUrl + "?user=" + JSON.stringify(this.user),
      });
      //return;
      //}
      uni.navigateTo({
        url: backUrl + "?user=" + JSON.stringify(this.user),
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.inp-group {
  width: 85%;
  margin: 0 auto;

  .inp-item {
    margin-top: 10upx;

    .inp-title {
      padding: 15upx 0;
      margin-top: 30upx;
      font-size: 30upx;
      font-weight: 900;
      color: #333;
    }

    .inp {
      padding: 15upx 0;
      color: #333;
      margin-top: 30upx;
    }
  }

  .sbtn {
    background: #18c7e1;
    color: #fff;
  }
}

.uniList {
  padding: 30upx 0;
}

.a1 {
  font-weight: bold;
}

.a2 {
  font-weight: 100;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    height: calc(100vh - var(--window-top));
    background-color: #1b1c1e !important;
  }

  .content {
    color: #ffffff !important;
  }

  .texts {
    color: #ffffff !important;
  }

  .t1 {
    color: #ccc !important;
  }

  uni-button {
    background: rgb(24, 199, 225) !important;
  }

  uni-button:nth-child(2) {
    color: #1b1c1e !important;
    background: rgb(244, 244, 244) !important;
  }
}
</style>
